<script>
import HeadImage from "@/components/common/HeadImage.vue";
import {Dialog} from "vant";
import FileUpload from "@/components/common/FileUpload.vue";
import GroupMember from "@/components/chat/ChatGroupMember.vue";
import AddGroupMember from "@/components/group/GroupMemberSelector.vue";

export default {
  name: "FriendInformation",
  components: {AddGroupMember, GroupMember, FileUpload, HeadImage},
  data() {
    return {
      showAddGroupMember: false
    }
  },
  computed: {
    curFriendUserInfo: {
      get() {
        return this.$store.state.commonData.curFriendUserInfo
      },
      set(value) {
        this.$store.commit("commonData/setCurFriendUserInfo", value)
      }
    },
    curGroupInfo: {
      get() {
        return this.$store.state.commonData.curGroupInfo
      },
      set(value) {
        this.$store.commit("commonData/setCurGroupInfo", value)
      }
    },
    curGroupMembers: {
      get() {
        return this.$store.state.commonData.curGroupMembers
      },
      set(value) {
        this.$store.commit("commonData/setCurGroupMembers", value)
      }
    },
    isOwner() {
      return this.curGroupInfo.ownerId == this.$store.state.userStore.userInfo.id;
    },
  },
  methods: {
    clickBack() {
      this.$router.go(-1)
    },
    onKick(member) {
      Dialog.confirm({
        title: 'Confirm removal',
        message: `Are you sure to remove member ${member.remarkNickName} from the group chat?`,
        confirmButtonColor: 'var(--chat-theme-color)',
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
      }).then(() => {
        this.$http({
          url: "/group/kick",
          method: 'POST',
          params: {
            groupId: this.activeGroup.id,
            userId: member.userId
          }
        }).then(() => {
          this.$message.success(`${member.remarkNickName} has been removed from the group chat`);
          member.quit = true;
        });
      })

    },
    onInviteMember() {
      this.showAddGroupMember = true;
    },
    loadGroupMembers() {
      this.$http({
        url: "/group/members",
        method: "POST",
        params: {
          groupId: this.activeGroup.id
        }
      }).then((members) => {
        this.groupMembers = members;
        this.$store.dispatch('commonData/updateCurGroupMembers', members)
      })
    },
    onCloseAddGroupMember() {
      this.showAddGroupMember = false;
    },
  },
  mounted() {
    console.log('cur curGroupInfo is: ', this.curGroupInfo)
    console.log('cur curGroupMembers is: ', this.curGroupMembers)
  }
}
</script>

<template>
  <div class="friend-info" v-if="curGroupInfo">
    <div class="friend-title">
      <div class="left">
        <div class="back" @click="clickBack"><img src="../assets/image/all/back-btn-circle.png" alt=""></div>
      </div>
    </div>
    <div class="group-member-list" style="margin-top: 50px">
      <div v-for="(member) in curGroupMembers" :key="member.id">
        <group-member v-show="!member.quit" class="group-member" :member="member"
                      :showDel="isOwner && member.userId != curGroupInfo.ownerId" @del="onKick"></group-member>
      </div>
      <div class="group-invite">
        <div class="invite-member-btn" title="Invite friends to join the group chat" @click="onInviteMember()">
          <i class="el-icon-plus"></i>
        </div>
        <div class="invite-member-text">Invite</div>
        <add-group-member :visible="showAddGroupMember" :groupId="curGroupInfo.id" :members="curGroupMembers"
                          @reload="loadGroupMembers" @close="onCloseAddGroupMember"></add-group-member>
      </div>
    </div>

    <!--    <div class="friend-title">-->
    <!--      <div class="left"> <div class="back" @click="clickBack"> <img src="../assets/image/all/back-btn-circle.png" alt=""> </div> </div>-->
    <!--      <div class="right"></div>-->
    <!--    </div>-->
    <!--    <div class="friend-avatar">-->
    <!--      <div class="avatar">-->
    <!--        <head-image :size="160" :name="curFriendUserInfo.nickName" :url="curFriendUserInfo.headImage"></head-image>-->
    <!--      </div>-->
    <!--      <div class="username">{{curFriendUserInfo.userName}}</div>-->
    <!--      <div class="info">-->
    <!--        <div class="nickname">{{curFriendUserInfo.nickName}}</div>-->
    <!--        <div class="">|</div>-->
    <!--        <div class="sex">{{curFriendUserInfo.sex === 0 ? 'Male' : 'Female'}}</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="line"></div>-->
    <!--    <div class="more">-->
    <!--      <div class="signature">-->
    <!--        <div class="icon flex-center"><van-icon name="flag-o" size="22" /></div>-->
    <!--        <div class="text">Signature: {{curFriendUserInfo.signature ? curFriendUserInfo.signature : 'null'}}</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="option-btn">-->

    <!--    </div>-->
  </div>
</template>

<style scoped lang="scss">
.friend-info {
  padding: 54px 24px 0 24px;
  //background: var(--im-color-white);
  background: #f5f5f5;
  height: 100vh;

  .friend-title {
    height: 42px;
    display: flex;
    justify-content: space-between;

    .back, .camera, .call {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      //img {
      //  width: 100%;
      //  height: 100%;
      //}
    }

    .back, .camera, .call {
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 12px rgba(13, 10, 44, 0.06);
    }

    .left {
      .back {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(13, 10, 44, 0.06);
      }
    }

    .right {
      display: flex;

      .camera {

      }

      .call {
        margin-left: 10px;
      }
    }
  }

  .friend-avatar {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .avatar {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: var(--slot-color);
    }

    .username {
      margin-top: 24px;
      font-size: 22px;
      font-weight: 400;
      line-height: 25.78px;
      color: var(--chat-name-text-color);
    }

    .info {
      display: flex;
      gap: 5px;
      margin-top: 16px;
      font-size: 18px;
      color: var(--chat-name-text-color);
    }
  }

  .line {
    margin-top: 30px;
    width: 345px;
    height: 1px;
    opacity: 1;
    border-top: 1px solid rgba(240, 240, 243, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 0 0 0;
  }

  .more {
    margin-top: 14px;

    .signature {
      height: 46px;
      line-height: 46px;

      .text {
        color: var(--chat-name-text-color);
      }
    }
  }

  .signature, .send-btn, .delete-btn {
    display: flex;
    align-items: center;

    .icon {
      width: 30px;
      height: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      margin-left: 10px;
      font-size: 16px;
      font-weight: 400;
      line-height: 0;
      color: var(--chat-error-text-color);
    }
  }

  .option-btn {
    margin-top: 16px;

    .send-btn, .delete-btn {
      height: 46px;
      line-height: 46px;
      margin-top: 5px;
      display: flex;

    }

    .send-btn {
    }

    .delete-btn {
    }
  }
}

</style>